@import "common/_functions.scss";
@import "common/_variables.scss";
[v-cloak] {
  display: none;
}
html,body{
    height: 100%;
    background-color: rgb(237, 237, 237);
}
.textalign{text-align: right;}
.icon-broswer{
    display: inline-block;
    width: rem(24);
    height: rem(24);
    background: url(../img/broswer@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
    color: rgb(130, 130, 130);
}

.icon-msg{
    display: inline-block;
    width: rem(24);
    height: rem(24);
    background: url(../img/msg@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
    color: rgb(130, 130, 130);
}

.icon-reduce{
    display: inline-block;
    width: rem(16);
    height: rem(16);
    background: url(../img/reduce@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
    margin-right: rem(23);
}

.icon-add{
    display: inline-block;
    width: rem(16);
    height: rem(16);
    background: url(../img/add@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
    margin-left: rem(23);
}
.icon-qq{
    display: inline-block;
    width: rem(32);
    height: rem(32);
    background: url(../img/qq@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
}
.icon-tel{
    display: inline-block;
    width: rem(36);
    height: rem(36);
    background: url(../img/tel@2x.png) no-repeat center center;
    background-size: cover;
}
.mt25{
    margin-top:rem(25);
}
.mr10{
    margin-right: rem(10);
}
//积分 兑换

.jf-buy{
    background-color: #fff;
    .focus img{
        width: 100%;
        height: rem(375);
    }
    .focus{
        height: rem(375);
        margin-bottom: rem(10);
    }
    .title{
        margin-bottom:rem(36);
        h4{
            width: rem(246);
            margin: 0 auto rem(18);
            text-align: center;
            font-size: rem(22);
        }
        p{
            text-align: center;
        }
    }
    .icon-broswer{
        margin-left: rem(15);
    }

    .sku{
        margin: 0 rem(12);
        .tit{
            margin-right: rem(2);
            line-height: rem(24);
            font-size: rem(16);
        }
        ul{
            border:1px solid rgb(237,237,237);
            border-width: 1px 0 1px 0;
            padding:rem(10) 0;
        }
        li{
            flex-wrap:wrap;
        }
        em{
            line-height: rem(24);
            font-size: rem(16);
            color: #ccc;
        }
        p{
            width:rem(230);
            span.sku-sel{
                display: inline-block;
                width: rem(54);
                height: rem(24);
                background: rgb(245,245, 245);
                margin:0 0 rem(10) rem(10);
                text-align: center;
                line-height: rem(24);
                border-radius: rem(4);
            }
            span.sku-sel.cur{
                background: rgb(255, 101, 101);
                color: #fff;
            }

            .inputText{
                width: rem(46);
                height: rem(24);
                background:rgb(245, 245, 245);
                border-radius:rem(4);
                border:1px solid #ccc;
                text-align: center;
                font-size: rem(12);
            }
        }

    }
    .details{
        margin: 0 rem(12);
        img{
            width: 100%;
        }
        h3{
            font-size: rem(16);
            font-weight: normal;
            margin: rem(36) 0 rem(10);
        }
        .msg{
            font-size: rem(14);
        }

    }

}
.btnbox{
    padding-bottom: rem(60);
    ul{
        height: rem(48);
        background-color:rgb(47, 47, 47);
        position: fixed;
        bottom: 0;
        color: #fff;
        box-sizing:border-box;

    }
    li:first-child{
        color: #fff;
        font-size: rem(24);
        line-height: rem(48);
        width:72%;
        padding-left: rem(25);
        box-sizing:border-box;
    }
    li:first-child em{
        font-size: rem(14);
    }
    li.buy{
        width:28%;
        background-color:rgb(255, 101, 101);
        line-height: rem(48);
        text-align: center;
        font-size: rem(14);
    }
}

//课程内页
.icon-easy{
    display: inline-block;
    width: rem(18);
    height: rem(18);
    background: url(../img/easy@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
}
.icon-time{
    display: inline-block;
    width: rem(18);
    height: rem(18);
    background: url(../img/time@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
}
.icon-num{
    display: inline-block;
    width: rem(18);
    height: rem(18);
    background: url(../img/num@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
}
.icon-1{
    display: inline-block;
    width: rem(20);
    height: rem(23);
    background: url(../img/layer1@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
}
.icon-tips{
    display: inline-block;
    width: rem(18);
    height: rem(18);
    background: url(../img/tips@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
}
.menupage{
    .focus{
        img{
            height:rem(300);
        }
        span.price{
            position: absolute;
            font-size: rem(14);
            color: #fff;
            background-color: rgba(255, 101, 101,1);
            display: inline-block;
            width: rem(128);
            height: rem(32);
            line-height: rem(32);
            text-align: center;
            border-radius: rem(100);
            right: rem(12);
            bottom:rem(-16);

        }
    }
    .text{
        padding:rem(8);
        border-bottom: 1px solid rgb(237, 237,237);
        h5{
            font-size: rem(12);
            span{
                border-bottom:2px solid rgb(47,47,47);
                color:rgb(47,47,47);
                padding:0 rem(10) rem(5) 0;
            }
        }
        ul.from{
            margin-top: rem(20);
            font-size: rem(10);
            img{
                display:inline-block;
                width: rem(40);
                height: rem(40);
                border-radius:100%;
                margin-right: rem(10);

            }
            .attention{
                display: inline-block;
                background:rgb(255,101,101);
                width: rem(64);
                height: rem(22);
                line-height: rem(22);
                border-radius:rem(10);
                color:#fff;
                text-align: center;

            }
            .gray{
                background: rgb(245, 245, 245);
            }
        }
        p{
            padding:rem(16) rem(24) rem(26);
            font-size: rem(14);
            text-align: left;
            color:rgb(76,80,81);
        }
        .special{
            padding:rem(0) rem(24);
            justify-content:space-between;
            span{
                font-size: rem(10);
                display: inline-block;
                text-align: center;
                vertical-align: middle;
                line-height: 1;
                margin-left: rem(5);
                em{
                    font-size: rem(5);

                }
            }
        }

        
    }
    .title{
        margin-bottom: 0!important;
        margin-top: rem(27);
    }

    .qingdan{
        padding: rem(13) rem(22);
        font-size: rem(14);
        margin-bottom: rem(17);
        dl{
            border-top: 1px solid rgb(255, 101, 101);
            -webkit-box-shadow:0 3px 8px rgba(130, 130, 130, .2);  
            -moz-box-shadow:0 3px 8px rgba(130, 130, 130, .2);  
            box-shadow:0 3px 8px rgba(130, 130, 130, .2);
            border-bottom: 1px solid rgb(237, 237, 237);
            .box{
                padding-bottom: rem(70);
            }
            .tobuy{
                background: rgb(247, 247, 247);
                line-height: rem(70);
                height: rem(70);
                .menubtn{
                    display: inline-block;
                    background: rgb(255, 101, 101);
                    padding: rem(6) rem(35) rem(9);
                    border-radius: rem(100);
                    line-height:normal;
                    color: #fff;
                    float: right;
                    margin: rem(19) rem(16);
                }
            }

        }
        .tit{
            padding: rem(37) rem(20) rem(27);
            border-bottom: 1px solid rgb(237, 237, 237);
            .txt{
                font-size: rem(18);
                padding-left: rem(12);
                i{
                    margin-right: rem(12);
                }
            }
            .addin{
                color: rgb(255, 101, 101);
                font-size: rem(10);
            }
        }
        dd{
            height: rem(40);
            line-height: rem(40);
            padding: rem(0) rem(50) 0 rem(16);
            font-size: rem(14);
            color: rgb(130, 130, 130);
            span{
                float: right;
            }
         }
        dd:nth-child(odd){
            background-color:rgba(247, 247, 247,0.5);
        }
        dd:nth-child(even){
            background-color: #fff;
        }

            
    }

    .step{
        font-size: rem(14);
        color: rgb(130, 130, 130);
        .stepbox{
            border-top: 1px solid rgb(237, 237, 237);

        }
        h4{
            font-size: rem(14);
            line-height:rem(33);
            height: rem(33);
            padding: rem(0) rem(12);
            em{
                font-weight: normal;
            }
        }
        .stepbox{
            margin-bottom: rem(30);
            -webkit-box-shadow:0 3px 8px rgba(130, 130, 130, .2);  
            -moz-box-shadow:0 3px 8px rgba(130, 130, 130, .2);  
            box-shadow:0 3px 8px rgba(130, 130, 130, .2);
            border-bottom: 1px solid rgb(237, 237, 237);
            img{
                width:100%;
                height: rem(260);
                display: inline-block;
            }
            p{
                padding:rem(28) rem(26);
            }
            .introduc{
                padding: rem(10) rem(12);
                border-top: 1px solid rgb(237, 237, 237);

            }
            .icon-tips{
                margin-right: rem(10);
            }
        }

    }

    .equipment{
        padding:rem(8) rem(22);
        border-top: 1px solid rgb(237, 237, 237);
        margin-bottom: rem(30);
            -webkit-box-shadow:0 3px 8px rgba(130, 130, 130, .2);  
            -moz-box-shadow:0 3px 8px rgba(130, 130, 130, .2);  
            box-shadow:0 3px 8px rgba(130, 130, 130, .2);
        h5{
            font-size: rem(14);
            text-align: center;
            em{
                font-weight: normal;
                color: rgb(201, 203, 213);
                font-size: rem(10);
            }
        }
        ul{
            justify-content:flex-start;
            padding:rem(5) 0;
            li{
                padding:0 rem(2);
                width: rem(40);
                text-align: center;

                a{
                    display: inline-block;
                    img{
                        display: inline-block;
                        width: rem(36);
                        height: rem(36);
                    }
                }
            }
            img{
                width: 100%;
            }
            p{
                text-align:center;
                font-size: rem(12);
                padding:rem(5) 0;
            }
        }
    }

    .menutype{
        padding:rem(8) rem(10);
        border-top: 1px solid rgb(237, 237, 237);
        font-size: rem(14);
        h3{
            margin-bottom: rem(12);
            a{
                font-size: rem(12);
                color: rgb(47, 47, 47);
            }
        }
        .typebox{
            span{
                display: inline-block;
                padding:0 rem(12);
                background: rgb(237, 237, 237);
                border-radius: rem(20);
                line-height:rem(20);
                height: rem(20);
                font-size: rem(12);
                color: #fff;
                margin-right: rem(8);
                margin-bottom:rem(8);
            }
        }
        .list{
            li{
                padding:rem(1);
            }
            img{
                display: inline-block;
                width: 100%;
            }
        }
    }
    .menutype:last-of-type{
        h3{
            padding: 0 rem(10);
        }
        .list{
            padding:0 rem(4) rem(8);
        }
        padding:rem(8) rem(0);
        
    }

    #video{width: 100%;background: #000;}
    .playbox{
        position: fixed;
        .play{
            position: absolute;
            left: 50%;
            top: 50%;
            width: rem(56);
            height: rem(56);
            background: url(../img/invalidName@2x.png) no-repeat center center;
            background-size:cover;
            transform:translateX(-50%) translateY(-50%);

        }
    }
}




























